<template>
  <div>
      <!-- 主键传值 父给子传 
      v-bind绑定变量 可简写为： 
      -->
  <Title :title="title"></Title>
  <!-- 1.先提供图标容器 ref当前元素模板引用 类似于id-->
   <div style="height: 200px" ref="box"></div>
  </div>
</template>

<script setup>
import Title from'./Title.vue';
//引入moment
import moment from 'moment';
//引入get请求
import {get} from '@/utils/request.js'
import{ref,onMounted} from 'vue';

//引入折线图构造函数
import { Line } from '@antv/g2plot';
const title = ref('实时湿度度曲线');
//声明模板引用
const box = ref(null);//{value:null}
//声明一个空数组收取后端数据
let temData = ref([]);
//声明折线图表实例函数
const loadLine = ()=>{
  //new Line(图表容器id，{图标配置项})
  const line = new Line(box.value, {
      //图表数据源
data:temData.value,
xField: 'time',
yField: 'humidity',
//配置x，y颜色
xAxis:{
label:{
  //旋转
  rotate:-45,
  style:{
      fill:'white'
  }
}
},
yAxis:{
label:{
  //旋转
  style:{
      fill:'white'
  }
}
},
label: {
  style:{
      fill:"white",
     
  }
},
point: {
  size: 5,
  shape: 'diamond',
  style: {
    fill: 'white',
    stroke: '#5B8FF9',
    lineWidth: 2,
  },
},
//给折线图设置动画
animation: {
      appear: {
        animation: 'wave-in',
        duration: 3500,
      },
    },
    //设置曲线平滑
    smooth:true,
tooltip: { showMarkers: false },
state: {
  active: {
    style: {
      shadowBlur:4,
      stroke: '#000',
      fill: 'red',
    },
  },
},
interactions: [{ type: 'marker-active' }],
});
line.render();
}

//声明获取当天数据函数
const getTemData = async()=>{
let response = await get('/dashboard/pageQueryTodayData',{
  page:1,
  pageSize:60
});
console.log(response,'获取相应');
response.data.list.forEach((item,index,arr)=>{
  //第一条数据更改值
  arr[0].humidity=12;
  item.time = moment(item.insert_time).format('HH:mm');
});
//数据采集可能一致 每隔十条或八条取一条
let temp = [];
for(var i=0;i<response.data.list.length;i++){
if(i%7==0){
  //下标除十等于零
  //将符合条件数据添加至temp
  temp.push(response.data.list[i])
}
}
temData.value = temp;
}
//生命周期 获得dom 节点 标签 ref=box
onMounted(async()=>{
  //调用获取函数
await getTemData();
loadLine();//加载折线图
})

</script>

<style lang="less">
  
</style>